<template>
  <n-modal v-model:show="showRef" class="go-create-modal" @afterLeave="closeHandle" @afterEnter="openHandle">
    <n-space size="large">
      <n-card class="card-box" hoverable>
        <template #header>
          <n-text class="card-box-tite">发布项目</n-text>
        </template>
        <template #header-extra>
          <n-text @click="closeHandle">
            <n-icon size="20">
              <component :is="CloseIcon"></component>
            </n-icon>
          </n-text>
        </template>
        <n-space class="card-box-content" justify="center">
          <n-form ref="formRef" :label-width="80" style="width: 400px" :model="formValue" :rules="rules">
            <n-form-item label="选择微网" path="grid_id">
              <n-cascader
                v-model:value="formValue.grid_id"
                :options="tagsOptions"
                check-strategy="child"
                placeholder="请选择"
                :on-update:value="getGatewayList"
              />
            </n-form-item>
            <n-form-item label="选择网关" path="gateway_id">
              <n-select v-model:value="formValue.gateway_id" :options="gatewayOptions" placeholder="请选择" />
            </n-form-item>
            <n-form-item label="选择环境" path="scope">
              <el-radio-group v-model="formValue.scope">
                <el-radio value="local">本地</el-radio>
                <el-radio value="cloud">云端</el-radio>
              </el-radio-group>
            </n-form-item>
            <div style="text-align: right">
              <n-button type="primary" attr-type="button" :loading="loading" @click="handleValidateClick">
                发布
              </n-button>
            </div>
          </n-form>
        </n-space>
      </n-card>
    </n-space>
  </n-modal>
</template>

<script lang="ts" setup>
import { ref, watch, reactive } from 'vue'
import { icon } from '@/plugins'
import { getDomainListApi } from '@/api/cloud/domain'
import { getDeviceTags, getGateway } from '@/api/cloud/device'
import { getUUID } from '@/utils'
import { domainid } from '@/utils/cloud/utils'
const { CloseIcon } = icon.ionicons5
const showRef = ref(false)

const emit = defineEmits(['close', 'submit'])
const props = defineProps({
  show: Boolean,
  cardData: Object,
  loading: Boolean
})

const rules = ref({
  grid_id: {
    required: true,
    type: 'string',
    message: '请选择微网',
    trigger: ['change']
  },
  gateway_id: {
    required: true,
    type: 'string',
    message: '请选择网关',
    trigger: ['change']
  },
  scope: {
    required: true,
    type: 'string',
    message: '请选择发布环境',
    trigger: ['change']
  }
})

const formValue = reactive<any>({
  grid_id: '',
  gateway_id: '',
  scope: 'local'
})
const formRef = ref<any>({})

watch(props, newValue => {
  showRef.value = newValue.show
})

// 关闭对话框
const closeHandle = () => {
  emit('close', false)
}

// 提交验证
const handleValidateClick = (e: MouseEvent) => {
  e.preventDefault()
  formRef.value?.validate((errors: any) => {
    if (!errors) {
      // success
      const data = {
        ...props.cardData,
        content: {
          ...props.cardData?.content,
          release_info: formValue
        }
      }
      emit('submit', data)
    }
  })
}

const tagsOptions = ref<any[]>([])
// 获取站点微网分组
const getTags = async () => {
  formValue.grid_id = ''

  const res: any = await getDeviceTags(
    {
      recursive: true,
      target_category: 'energy_subsystem'
    },
    domainid()
  )
  tagsOptions.value = res.msg
    .filter((item: any) => item.item_subcategory === '站点' && item.item_hide === 0)
    .map((item: any) => {
      return {
        label: item.item_label,
        value: item.id,
        children: item.children
          ? item.children.map((child: any) => {
              return {
                label: child.item_label,
                value: child.id,
                station_id: item.id
              }
            })
          : []
      }
    })
}
const gatewayOptions = ref<any[]>([])
// 获取网关列表
const getGatewayList = async (val: any, row: any) => {
  formValue.grid_id = val
  formValue.gateway_id = ''
  formValue.station_id = row.station_id
  if (formValue.grid_id) {
    const res: any = await getGateway(
      {
        tag: 'energy_subsystem',
        value: formValue.grid_id,
        include_details: 1
      },
      domainid()
    )
    gatewayOptions.value = res.msg.map((item: any) => {
      return {
        label: item.item_name,
        value: item.item_iot_devicename
      }
    })
  }
}

// 打开对话框
const openHandle = () => {
  getTags()
}
</script>
<style lang="scss" scoped>
$cardWidth: 570px;

@include go('create-modal') {
  position: fixed;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
  .card-box {
    width: $cardWidth;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0);
    @extend .go-transition;
    &:hover {
      @include hover-border-color('hover-border-color');
    }
    &-tite {
      font-size: 14px;
    }
    &-content {
      padding: 0px 10px;
      width: 100%;
    }
  }
}
</style>
